<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '../router';
const route = useRoute()
const onClickLeft = () => {
   router.push('/')
}
//获取地址信息，假如路径中有就从路径中获取，假如路径中没有就请求获取默认地址
const addressId = ref(null)
const address = ref(null)
const name = ref(null)
const phone = ref(null)

import { addressBookList } from '../apis/addressBook.js'
import { get } from 'vant/lib/utils';
const list = ref([])
async function getAddressBookList() {
   const res = await addressBookList()
   list.value = res.data.data
   list.value.forEach(item => {
      if (item.isDefault == 1) {
         addressId.value = item.id
         address.value = item.address
         name.value = item.name
         phone.value = item.tel
      }
   })
}
function getAddressInfo() {
   if (route.query.addressId) {
      //假如路径中有地址信息，就从路径中获取
      addressId.value = route.query.addressId
      address.value = route.query.address
      name.value = route.query.name
      phone.value = route.query.phone
   } else {
      //假如路径没有地址信息，就请求获取默认地址
      getAddressBookList()
   }

}
getAddressInfo()


//时间转换
function convertMinutesToTime(minutes) {
   let hours = Math.floor(minutes / 60);
   let remainingMinutes = minutes % 60;
   return hours + ':' + (remainingMinutes < 10 ? '0' : '') + remainingMinutes;
}
const hours = ref(null)
const minutes = ref(null)
const children1 = ref([])
const children2 = ref([])
const children3 = ref([])

const text = ref('')
const time = ref(null)
function getData() {
   var now = new Date();
   console.log(now);
   hours.value = now.getHours();
   minutes.value = now.getMinutes();

   //[0,8)点  默认显示
   if (hours.value >= 0 && hours.value < 8) {
      for (let i = 1; i < 100; i++) {
         if (1360 - (8 * 60 + 20 + 20 * i) < 0) {
            break;
         }
         if (i === 1) {
            children1.value.push({
               text: convertMinutesToTime(8 * 60 + 40 * i), id: i
            })
         }
         if (i !== 1) {
            children1.value.push({
               text: convertMinutesToTime(8 * 60 + 20 + 20 * i), id: i
            })
         }
      }
      return
   }
   if (hours.value >= 22) {
      children1.value = [];
      return
   }
   //立即送达预计送达时间
   const num = hours.value * 60 + minutes.value + 40
   if (hours.value >= 8 && hours.value < 22) {
      for (let i = 1; i < 40; i++) {
         if (1360 - (hours.value * 60 + minutes.value + 20 + 20 * i) < 0) {
            break;
         }
         if (i === 1) {
            children1.value.push({
               text: '立即送达' + '(' + convertMinutesToTime(hours.value * 60 + minutes.value + 40) + ')', id: i
            })
         }
         if (i !== 1) {
            children1.value.push({
               text: convertMinutesToTime(hours.value * 60 + 20 + minutes.value + 20 * i), id: i
            })
         }
      }
   }

   time.value = children1.value[0].text
}
getData()
function getData2() {
   for (let i = 1; i < 100; i++) {
      if (1360 - (8 * 60 + 20 + 20 * i) < 0) {
         break;
      }
      if (i === 1) {
         children2.value.push({
            text: convertMinutesToTime(8 * 60 + 40 * i), id: 100 + i
         })
      }
      if (i !== 1) {
         children2.value.push({
            text: convertMinutesToTime(8 * 60 + 20 + 20 * i), id: 100 + i
         })
      }
   }
}
getData2();
function getData3() {
   for (let i = 1; i < 100; i++) {
      if (1360 - (8 * 60 + 20 + 20 * i) < 0) {
         break;
      }
      if (i === 1) {
         children3.value.push({
            text: convertMinutesToTime(8 * 60 + 40 * i), id: 200 + i
         })
      }
      if (i !== 1) {
         children3.value.push({
            text: convertMinutesToTime(8 * 60 + 20 + 20 * i), id: 200 + i
         })
      }
   }
}
getData3();
//分类选择器
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
   {
      text: '今天',
      children: children1.value
   },
   {
      text: '明天',
      children: children2.value

   },
   {
      text: '后天',
      children: children3.value
   },
];
//动作面板
const show = ref(false);
function clickItem(item) {
   if (item.id < 100) {
      text.value = ''
      time.value = item.text
   }
   if (item.id > 100 && item.id < 200) {
      text.value = '明天'
      time.value = item.text
   }
   if (item.id > 200) {
      text.value = '后天'
      time.value = item.text
   }

   console.log(item)
}
//一个时间计时器停留时间过长 点击支付跳转回上一个页面并提示 停留时间过长，请重新提交

const timeout = ref(false)
import { showNotify, showToast } from 'vant';
setTimeout(() => {
   timeout.value = true
}, 180000);

import { createOrder } from '../apis/order.js'
async function goPay() {
   console.log(timeout.value)
   if (timeout.value) {
      router.push('/')
      showNotify({
         type: 'warning',
         message: '停留时间过长,请重新提交!',
         duration: 2000,
      });
      return
   }
   if (time.value === null) {
      //请选择预送达时间
      showNotify({
         type: 'warning',
         message: '目前已停业中,请选择预送达时间!',
         duration: 2000,
      });
      return
   }
   //创建订单,去支付
   //添加订单
    const res = await createOrder(addressId.value,text.value,time.value,remark.value,address.value,name.value,phone.value)
   //跳转回上一个页面
   router.push({
      path:'/toPay',
      query:{
         id:res.data.data
      }
   })
}

//获取购物车列表
import { getCartList } from '../apis/shoppingCart.js'
const shoppingCart = ref([])
const amount = ref(0)
async function getShoppingCartList() {
   const res = await getCartList()
   console.log(res.data.data)
   shoppingCart.value = res.data.data
   shoppingCart.value.forEach(item => {
      amount.value += item.amount
   })
}
getShoppingCartList();
//备注
const remark = ref('')
const show2 = ref(false);
</script>
<template>
   <van-nav-bar title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
   <div class="card">
      <!-- 选择地址 -->
      <van-button icon="arrow" icon-position="right" style="width: 100%;" @click="$router.push('/address')">
         <div v-if="addressId !== null" style="text-align:left;">

            <div style="font-size: 16px;font-weight: bold">
               {{ address }}
            </div>
            <div>
               {{ name }} {{ phone }}
            </div>
         </div>
         <div v-if="addressId === null">
            <h2 style="color: orange;">请选择您的收货地址</h2>
         </div>
      </van-button>
      <van-button icon="arrow" icon-position="right" style="width: 100%;" @click="show = true">预计送达时间
         <div v-if="time !== null">{{ text + time }}</div>
      </van-button>
      <!-- 填写备注 -->
      <van-button icon="arrow" icon-position="right" style="width: 100%;" @click="show2 = true">
         <div>
            备注:
         </div>
         {{ remark }}
      </van-button>
   </div>

   <!-- 订单信息 -->

   <div class="card">
      <div v-for="item in shoppingCart" :key="item.id">
         <van-card :num="item.number" :price="item.amount" :desc="item.dishFlavor" :title="item.name"
            :thumb="item.image" />
      </div>
   </div>
   <div style="padding-bottom: 50px;">
      <div class="card">
         <div style="margin-left: 10px;">
            打包费: ¥1
         </div>
         <div style="margin-left: 10px;">
            配送费: ¥3
         </div>
         <div style="margin-left: 70%">
            合计: ¥{{ amount + 4 }}
         </div>
      </div>
   </div>
   <!-- 取消 去支付 -->
   <van-action-bar>
      <van-action-bar-button type="warning" text="取消" @click="$router.push('/')" />
      <van-action-bar-button type="danger" text="确认下单" @click="goPay()" />
   </van-action-bar>


   <!-- 预订选择框 -->
   <van-action-sheet v-model:show="show" title="选择预送达时间">
      <van-tree-select @click-item="clickItem" v-model:active-id="activeId" v-model:main-active-index="activeIndex"
         :items="items" />
   </van-action-sheet>
   <!-- 备注弹窗 -->
   <van-dialog v-model:show="show2" title="请输入备注">
      <van-cell-group inset>
         <van-field v-model="remark" rows="4" autosize label="备注" type="textarea" maxlength="50" placeholder="请输入"
            show-word-limit />
      </van-cell-group>
   </van-dialog>

</template>
<style>
.card {
   width: 90%;
   /* 设置卡片宽度 */
   border: 1px solid #ccc;
   /* 添加边框 */
   border-radius: 8px;
   /* 圆角边框 */
   overflow: hidden;
   /* 防止内容溢出 */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* 添加阴影效果 */
   margin: 20px;
   /* 添加外边距 */
}
</style>